import React, { useEffect, useRef, useState } from "react";
import {Radio} from "antd";
import * as echarts from "echarts";
import { findTotalBar,findTotalArea } from "../../services/total";

export default function Total() {
    const myChart = useRef(null);
    const [placement,setPlacement] = useState("bar");
    useEffect(() => {
        showChart();
    }, [""]);
    const placementChange = function(e){
        setPlacement(e.target.value);
        showChart(e.target.value);
    }
    const barOption = (xAxisData,seriesData) => ({
        tooltip: {},
        xAxis: {
            // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            data: xAxisData
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                // data: [5, 20, 36, 10, 10, 20],
                data: seriesData
            },
        ],
    });
    const areaOption = (seriesData) => ({

        tooltip: {
            trigger: "item",
            formatter: "{b}<br />{d}%",
        },
        legend: {
            orient: "vertical",
            left: "left",
        },
        series: [
            {
                type: "pie",
                stillShowZeroSum: true,
                label: {
                    show: true,
                },
                radius: "50%",
                data: seriesData,
                // data: [
                //     {
                //         value: 5000000,
                //         name: "衬衫",
                //     },
                //     {
                //         value: 822312,
                //         name: "羊毛衫",
                //     },
                //     {
                //         value: 3442212,
                //         name: "雪纺衫",
                //     },
                //     {
                //         value: 5512332,
                //         name: "裤子",
                //     },
                //     {
                //         value: 5512133,
                //         name: "高跟鞋",
                //     },
                //     {
                //         value: 2332131,
                //         name: "袜子",
                //     },
                // ],
            },
        ],
    });
    const showChart = async (type = "bar") => {
        echarts.dispose(myChart.current);
        let chart = echarts.init(myChart.current);
        
        // 绘制图表
        if(type == "bar"){
            let {xAxisData,seriesData} = await findTotalBar();
            // setXAxisData(xAxisData);
            // setSeriesData(seriesData);
            
            chart.setOption(barOption(xAxisData,seriesData));
        }else{
            let seriesData = await findTotalArea();
            // setSeriesData(seriesData);
            chart.setOption(areaOption(seriesData));
        }
        // chart.setOption();
    };
    return (
        <div>
             <Radio.Group value={placement} onChange={placementChange}>
                <Radio.Button value="bar">销量统计</Radio.Button>
                <Radio.Button value="area">销量占比</Radio.Button>
            </Radio.Group>
            <div
                style={{ width: "90%", height: 400,marginTop:50 }}
                id="myChart"
                ref={myChart}
            ></div>
        </div>
    );
}
